<template>
  <div class="agreement">
    <div class="underline" :style="{ width: route.query.type === '3' ? '170px' : '120px' }">
      <span class="title1 color1 zIndex fontBold"> {{ text }} </span>
    </div>
    <div v-if="route.query.type == 1" class="agreement_content font400 content3 color3">
      <div class="container flex-col">
        <!-- <div class="title sq_tilte content_line_height">
          协会介绍+
        </div> -->
        <div class="content-English">
          SHENZHEN REAL
          <br>ESTATE ASSOCIATION
        </div>
        <div class="content-Chinese">
          深圳市房地产协会
        </div>
        <img src="https://new.srea.com.cn/static/img/about1.855fce74.jpg" alt="">
        <div class="content-items flex-row">
          <div class="content-item">
            <div class="number">
              {{ associationObj.member_total }}
            </div>
            <!-- <div class="add">
              +
            </div> -->
            <div class="type">
              会员企业
            </div>
          </div>
          <div class="content-item">
            <div class="number">
              {{ associationObj.employees }}
            </div>
            <!-- <div class="add">
              +
            </div> -->
            <div class="type">
              从业人员
            </div>
          </div>
          <div class="content-item">
            <div class="number">
              {{ associationObj.property }}
            </div>
            <!-- <div class="add">
              +
            </div> -->
            <div class="type">
              地产开发项目
            </div>
          </div>
        </div>
        <p>
          深圳市房地产业协会（以下简称“深圳房协”）,英文名称:SHENZHEN REAL ESTATE
          ASSOCIATION(缩写SREA)。由深圳市规划和
          自然资源局在1989年发起成立，是深圳市第一家注册成立的以房地产开发企业为主的行业协会(登记证号:社证字第00001号)。
        </p>
        <p>
          在深圳市住房和建设局、深圳市规划和自然资源局支持和指导下，秉承“服务企业、服务政府、服务社会”的宗旨，协会截止目前共有会员单位{{
              associationObj.member_total
          }}家，其中会长单位{{ associationObj.hz_dw }}家，副会长单位{{
    associationObj.fhz_dw
}}家，常务理事单位{{ associationObj.cwls_dw }}家， 理事单位{{
    associationObj.ls_dw
}}家，普通会员单位{{ associationObj.pthy_dw }}家，监事长单位{{
    associationObj.jsz_dw
}}家，监事单位{{
    associationObj.js_dw
}}家，是深圳市首批获得承接政府转移职能和购买服务资质的社会组织。
        </p>
        <p>
          根据《深圳市房地产市
          场监管办法》(深圳市人民政府令第221号)协会具有政策解读、资质年报办理、市场巡查、企业走访、系统维护、秘钥管理员办理
          、诚信评价等职能，代表会员意愿，维护会员合法权益，为会员提供服务，协调会员之间关系，沟通会员与政府联系，传达政府政策
          精神，维护行业公平竞争，提高人民居住水平，促进城镇建设，推动建立健康有序的房地产业，为构建和谐社会服务。
        </p>
        <p>
          深圳市房地产业协会在主管部门的指导下，依照法律、法规、规章和行业组织章程，实行房地产行业自律管理,其主要职能有：
        </p>
        <div class="icon-items">
          <div class="icon-item flex-row">
            <i class="iconfont icon-a-1" />
            <div class="item-msg">
              制定并组织实施本行业的行规行约，建立行业自律机制和会员信用记录
            </div>
          </div>
          <div class="icon-item flex-row">
            <i class="iconfont icon-a-5" />
            <div class="item-msg">
              发布市场和行业信息，推荐行业产品或者服务，提供技术咨询，宣传房地产法律法规及相关政策
            </div>
          </div>
          <div class="icon-item flex-row">
            <i class="iconfont icon-a-2" />
            <div class="item-msg">
              法律、法规、规章授权或者政府部门委托以及行业组织章程规定的其他职能
            </div>
          </div>
          <div class="icon-item flex-row">
            <i class="iconfont icon-a-6" />
            <div class="item-msg">
              承担主管部门委托的行业管理工作，对行业行为进行检查和评价
            </div>
          </div>
          <div class="icon-item flex-row">
            <i class="iconfont icon-a-3" />
            <div class="item-msg">
              开展行业培训、交流、咨询、展览等活动，推广应用新材料、新技术、新工艺，提升行业素质以及产品和服务质量
            </div>
          </div>
          <div class="icon-item flex-row">
            <i class="iconfont icon-a-7" />
            <div class="item-msg">
              对违反行业组织章程或者行规行约、损害行业整体利益者，采取相应的行业自律措施
            </div>
          </div>
          <div class="icon-item flex-row">
            <i class="iconfont icon-a-4" />
            <div class="item-msg">
              协助政府部门开展行业调查、决策咨询及产业政策制订等活动，向政府有关部门反映涉及行业利益的事项，提出意见和建议，维护行业的利益及会员的合法权益
            </div>
          </div>
          <div class="icon-item flex-row">
            <i class="iconfont icon-a-8" />
            <div class="item-msg">
              规范行业行为，客观公正地协调会员之间、会员与非会员之间、会员与政府之间，会员与消费者之间的矛盾纠纷，发挥其维护社会公共利益的作用
            </div>
          </div>
        </div>
        <p>深圳房协设秘书处，秘书处下设综合事务部、行业服务部。</p>
        <p>
          深圳房协是中国房地产业协会常务理事单位，广东省房地产业协会副会长单位，多次受到中国房地产业协会及省、市主管部门的嘉奖，在2014年被评为深圳市行业协会5A级行业协会商会，并被授予“全国房地产行业先进协会”，“广东省先进民间组织”，“深圳市优秀社团”等称号。
        </p>
      </div>
      <div class="container flex-col cont structure">
        <div class="title sq_tilte content_line_height">组织结构+</div>
        <img class="logo" src="@/assets/img/logo.png" alt />
        <img src="@/assets/img/about.png" alt />
      </div>
      <div style="height: 30px; width: 100%"></div>
    </div>
    <div v-if="route.query.type == 2" class="agreement_content font400 content3 color3">
      <div class="container flex-col cont">
        <p class="countTitle">各房地产开发单位，各位专家、专业人士：</p>
        <p>
          深圳市房地产业协会,简称深圳房协,英文名称:SHENZHEN REAL ESTATE
          ASSOCIATION(缩写SREA)。深圳房协成立于1989年10月5日，登
          记证号：社证字第00001号，是由在深圳市从事房地产开发、与房地产相关的咨询以及房地产研究的企事业单位自愿组成的非营利性行业组织，现有会员单位{{
              associationObj.member_total
          }}家，其中会长单位{{ associationObj.hz_dw }}家，副会长单位{{
    associationObj.fhz_dw
}}家，常务理事单位{{ associationObj.cwls_dw }}家， 理事单位{{
    associationObj.ls_dw
}}家，普通会员单位{{ associationObj.pthy_dw }}家，监事长单位{{
    associationObj.jsz_dw
}}家，监事单位{{ associationObj.js_dw }}家。
        </p>
        <p>
          受深圳市规划和国土资源委员会委托，充分发挥行业协会桥梁纽带作用，深圳市房地产业协会负责我市房地产开发企业资质年检、市场巡察监管、行业投诉、诚信系统公示、项目手册的管理和维护等
          工作。目前已对我市注册{{
              associationObj.d_enterprise
          }}家房地产开发企业、{{ associationObj.employees }}余名从业人员、{{
    associationObj.property
}}多个开发项目实现了动态管理，其中房地产行业诚信评价体系、
          项目手册已成为政府行业监管的一项重要举措，不仅为政府获取行业发展信息提供了重要一手资讯，更成为开发企业对外公示，接受社会公众监
          督的重要平台。
        </p>
        <p>
          深圳市房地产业协会在主管部门的指导下，依照法律、法规、规章和行业组织章程，实行房地产行业自律管理,其主要职能有：
        </p>
        <p>
          <span>深圳市房地产业协会在主管部门的指导下，依照法律、法规、规章和行业组织章程，实行房地产行业自律管理,其主要职能有：</span>
          <span>（一）制定并组织实施本行业的行规行约，建立行业自律机制和会员信用记录；</span>
          <span>（二）对违反行业组织章程或者行规行约、损害行业整体利益者，采取相应的行业自律措施；</span>
          <span>（三）开展行业培训、交流、咨询、展览等活动，推广应用新材料、新技术、新工艺，提升行业素质以及产品和服务质量；</span>
          <span>（四）发布市场和行业信息，推荐行业产品或者服务，提供技术咨询；</span>
          <span>（五）宣传房地产法律法规及相关政策；</span>
          <span>（六）规范行业行为，客观公正地协调会员之间、会员与非会员之间、会员与政府之间，会员与消费者之间的矛盾纠纷，发挥其维护社会公共利益的作用；</span>
          <span>（七）协助政府部门开展行业调查、决策咨询及产业政策制订等活动，向政府有关部门反映涉及行业利益的事项，提出意见和建议，维护本行业的利益及会员的合法权益；</span>
          <span>（八）承担主管部门委托的行业管理工作，对行业行为进行检查和评价；</span>
          <span>（九）法律、法规、规章授权或者政府部门委托以及行业组织章程规定的其他职能。</span>
        </p>
        <p>
          深圳市房地产业协会的宗旨：代表会员意愿，维护会员合法权益，为会员提供服务，协调会员之间关系，沟通会员与政府的联系，传达政府政策意图，维护公平竞争，为提高人民居住水平，促进城镇建设，建立健康有序的房地产业，构建社会主义和谐社会服务。
        </p>
        <p>
          为了更好地适应深圳现代化城市建设的需要，更好地发挥协会的职能作用，进一步加强房地产行业的沟通，加强与政府之间的联系，传递信息，促进我市房地产业的健康有序发展，诚意邀请贵单位为我协会的会员单位。因您的参与，深圳市房地产业协会将增添一份力量！
        </p>
        <p class="countTitle">
          会员的权利与义务:
        </p>
        <p>
          <span>详情请点击查看《深圳市房地产业协会章程》</span>
          <span>单位会员应按照《深圳市房地产业协会章程》中规定缴纳会费条款，每年向协会交纳一次会费。</span>
          <span>根据《深圳市房地产业协会章程》规定，会费标准：</span>
          <span>(1）副会长单位每年缴纳会费50000元</span>
          <span>(2）常务理事单位每年缴纳会费20000元</span>
          <span>(3）理事单位每年缴纳会费15000元</span>
          <span>(4）会员单位每年缴纳会费8000元</span>
          <span class="orange">户 名：深圳市房地产业协会</span>
          <span class="orange">帐 号：4430 6612 0012 0150 05738</span>
          <span class="orange">开户行：交通银行深圳燕南支行</span>
        </p>
        <p class="countTitle">
          联系方式：
        </p>
        <p>
          <span>地址：{{ associationObj.address }} 邮编：{{
              associationObj.post_code
          }}</span>
          <span>电话：{{ associationObj.phone }}</span>
          <span>联系人：{{ associationObj.contacts }}</span>
          <span>电子邮箱：{{
              associationObj.email
          }}</span>
          <span>网址： {{ associationObj.website }}</span>
        </p>
        <p class="countTitle">
          附件下载：
        </p>
        <p>
          <span @click="downPdf(associationObj.file1)" class="orange">附件1：《会员入会申请表》点击下载</span>
          <span @click="downPdf(associationObj.file2)" class="orange">附件2：《深圳市房地产业协会章程》点击下载</span>
        </p>
        <img style="margin-top:10px" src="https://new.srea.com.cn/static/img/QR%20code.fb34874d.png" alt="">
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div @click="back" class="btn_item cancle font400 content3 color4">
        返回
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { getAssociations } from '@/api'
const router = useRouter()
const route = useRoute()
const store = useStore()
const text: any = ref('')

console.log(route.query.type)
if (route.query.type === '1') {
  text.value = '协会介绍'
} else if (route.query.type === '2') {
  text.value = '入会协议'
} else if (route.query.type === '3') {
  text.value = '平台功能介绍'
}

const downPdf = (file: any) => {
  // window.location.href = file
  // console.log(file)
  const link = document.createElement('a')
  link.setAttribute('href', file)
  link.setAttribute('download', 'word.docx')
  link.target = '_blank'
  link.style.visibility = 'hidden'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

const associationObj: any = ref({})

const getAssociationslist = async () => {
  const res: any = await getAssociations()
  associationObj.value = res[0]
  console.log(res)
}

getAssociationslist()

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}
</script>

<style lang="less" scoped>
.agreement {
  padding: 0 15px 80px;
  margin-top: 40px;

  .agreement_content {
    margin-top: 20px;
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
    line-height: 25px;
  }
}

.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

  .footer_btn {
    padding: 0 30px;
    height: 100%;

    .cancle {
      width: 100%;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
  }
}

.flex-row {
  -webkit-box-orient: horizontal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex-col[data-v-566bd328],
.flex-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
}

.flex-col {
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
}

.cont {
  // padding: 35px 35px 0;
  // background-color: #fff;
  // -webkit-box-shadow: 0 0 15px #fbf2e9;
  // box-shadow: 0 0 15px #fbf2e9
}

.orange {
  color: #f57d3c;
  font-weight: 700;
}

.cont p {
  margin-bottom: 10px;
}

.cont .countTitle {
  color: #1f1f1f;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  margin-bottom: 0;
}

.cont p span {
  display: block;
}

.cont>img {
  width: 100%;
}

.number {
  height: 44px;
  font-size: 28px;
  font-weight: 700;
  color: #f57d3c;
  line-height: 39px;
}

.add {
  position: absolute;
  font-size: 30px;
  top: -5px;
  left: 70px;
  font-weight: 700;
  color: #f57d3c;
}

.type {}

.content-item {
  margin-top: 30px;
  position: relative;
  font-size: 28px;
}

.title {
  font-weight: 700;
  color: #f57d3c;
  line-height: 48px;
  width: 100%;
  border-bottom: 1px solid #dedede;
  font-size: 24px;
  padding: 0 0 5px 0;
}

.flexItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.content {
  margin-top: 29px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.content-img {
  position: relative;
  margin-right: 48px;
}

.info {
  position: absolute;
  top: 425px;
  width: 341px;
  height: 110px;
  background: #f57d3c;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  padding-left: 20px;
}

.info-name {
  font-size: 34px;
  font-weight: 700;
  color: #fff;
}

.info-msg {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

.type {
  font-size: 16px;
  font-weight: 400;
  color: #1f1f1f;
  line-height: 26px;
}

.type-English {
  margin-top: 20px;
  height: 75px;
  font-size: 18px;
  font-weight: 400;
  color: #b0b0b0;
  line-height: 30px;
}

.msg {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  line-height: 26px;
  position: relative;
  height: 1050px;
}

.sign {
  position: absolute;
  right: 0;
  margin-top: 40px;
}

.content-items {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  text-align: left;
  margin-bottom: 10px;
}

.content-English {
  height: 37px;
  font-weight: 400;
  color: #908a87;
  line-height: 24px;
  font-size: 14px;
}

.content-Chinese {
  margin-top: 17px;
  font-size: 26px;
  height: 50px;
  font-weight: 400;
  color: #1f1f1f;
  line-height: 42px;
}

.icon-items {
  padding: 20px 30px;
  background-color: rgb(252, 248, 240);
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 34px 0;
}

.icon-item {
  /* justify-content: space-between; */
  margin-bottom: 40px;
}

.icon-item>i {
  width: 60px;
  text-align: center;
  height: 60px;
  line-height: 60px;
  justify-content: space-between;
  background-color: #fff;
  color: #f57d3c;
  font-size: 36px;
  border-radius: 50%;
}

.item-msg {
  margin-left: 24px;
  width: 202px;
  height: auto;
  font-size: 14px;
  font-weight: 400;
  color: #1f1f1f;
  line-height: 26px;
}

.cont {
  padding: 15px;
  background-color: #fff;
  box-shadow: 3px 5px 12px 0px rgba(208, 133, 79, 0.2);
}
.title {
  font-weight: bold;
  color: #f57d3c;
  line-height: 48px;
  width: 100%;
  /* height: 30px; */
  padding-bottom: 20px;
  border-bottom: 1px solid #dedede;
}
.structure {
  margin-top: 46px;
}
.structure > .logo {
  text-align: center;
  width: 250px;
  margin: 43px auto 33px;
}
.cont > p {
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 30px;
    margin-bottom: 10px;
  }
@media (min-width: 750px) {
  .cont > p {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    line-height: 30px;
    margin-bottom: 10px;
  }
  .cont p {
  margin-bottom: 10px;
}
  .structure > .logo {
  text-align: center;
  width: 150px;
  margin: 43px auto 33px;
}
  .structure {
  margin-top: 46px;
}
.title {
  font-weight: bold;
  color: #f57d3c;
  line-height: 48px;
  width: 100%;
  /* height: 30px; */
  font-size: 24px;
  border-bottom: 1px solid #dedede;
  padding: 5px 0;
}
  .cont {
    background-color: #fff;
    padding: 5px 10px;
    position: relative;
    /* height: 2500px; */
    box-shadow: 3px 5px 12px 0px rgba(208, 133, 79, 0.2);
  }

  .item-msg {
    width: 202px;
    font-size: 14px;
    font-weight: 400;
    color: #1f1f1f;
    line-height: 26px;
    margin-left: 24px;
    height: auto;
  }

  .icon-items {
    background-color: rgb(252, 248, 240);
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 24px;
    margin: 20px 0;
  }

  .icon-item {
    /* justify-content: space-between; */
    margin-bottom: 40px;
  }

  .icon-item>i {
    width: 60px;
    text-align: center;
    height: 60px;
    line-height: 60px;
    justify-content: space-between;
    background-color: #fff;
    color: #f57d3c;
    font-size: 36px;
    border-radius: 50%;
  }

  .agreement {
    padding: 0 30px 80px;
    margin-top: 40px;

    .agreement_content {
      margin-top: 20px;
      padding: 15px;
      background-color: #fff;
      border-radius: 5px;
      line-height: 25px;
    }
  }

  .content-English {
    height: 40px;
    font-weight: 400;
    color: #908a87;
    line-height: 20px;
    font-size: 12px;
  }

  .cont .countTitle {
    color: #1f1f1f;
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    margin-bottom: 0;
  }

  .content-Chinese {
    margin-top: 17px;
    font-size: 26px;
    height: 50px;
    font-weight: 400;
    color: #1f1f1f;
    line-height: 42px;
  }

  img {
    width: 100%;
  }

  .type {
    font-size: 16px;
    font-weight: 400;
    color: #1f1f1f;
    line-height: 26px;
  }

  .content-items {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    text-align: left;
    margin-bottom: 10px;
  }

  .number {
    height: 44px;
    font-size: 24px;
    font-weight: 700;
    color: #f57d3c;
    line-height: 39px;
  }

  .content-item {
    margin-top: 30px;
    position: relative;
    font-size: 28px;
  }

  .fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

    .footer_btn {
      padding: 0 30px;
      height: 100%;

      .cancle {
        width: 100%;
        height: 44px;
        background: #ff7a1f;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
      }
    }
  }
}
</style>
